import React from 'react'
import { NavBar, SideBar, Grid, Image } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import '../assets/style/cate.scss';

import goodsImg from '../assets/imgs/01.png';

export default function Cate() {
  const navigate = useNavigate();
  // 返回上一页
  const back = () => {
    navigate(-1);
  }
  // 导航数据
  const tabs = [
    {
      key: 1,
      title: '家用电器',
    },
    {
      key: 2,
      title: '手机通信',
    },
    {
      key: 3,
      title: '厨房家电',
    },
    {
      key: 4,
      title: '母婴用品',
    },
    {
      key: 5,
      title: '服装鞋类',
    },
    {
      key: 6,
      title: '汽车用品',
    },
    {
      key: 7,
      title: '图书音像',
    },
    {
      key: 8,
      title: '国际品牌',
    },
    {
      key: 9,
      title: '海外代购',
    },
    {
      key: 10,
      title: '自营商品',
    },
  ]
  return (
    <div className='cate-container'>
      <NavBar onBack={back} className='page-header'>分类</NavBar>
      <div className='cate-body'>
        {/* 侧边导航 */}
        <SideBar>
          {tabs.map(item => (
            <SideBar.Item style={{ background: '#FFF' }} key={item.key} title={item.title} />
          ))}
        </SideBar>

        {/* 右侧内容 */}
        <div className='cate-list'>
          <h3>家用电器</h3>
          <Grid columns={3} gap={10}>
            {
              [1, 1, 1, 1, 1, 1].map((item, index) => (
                <Grid.Item key={index}>
                  <Image src={goodsImg} fit="contain"></Image>
                  <p>手机通信-{index}</p>
                </Grid.Item>
              ))
            }
          </Grid>
        </div>
      </div>

    </div>
  )
}
